<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuimini-iframe版 v2 - 基于Layui的后台管理系统前端模板</title>
    <meta name="keywords" content="layuimini,layui,layui模板,layui后台,后台模板,admin,admin模板,layui mini">
    <meta name="description" content="layuimini基于layui的轻量级前端后台管理框架，最简洁、易用的后台框架模板，面向所有层次的前后端程序,只需提供一个接口就直接初始化整个框架，无需复杂操作。">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="css/themes/default.css" media="all">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <script src="lib/layui-v2.6.3/layui.js?v=2.0.0" charset="utf-8"></script>
    <script src="js/lay-config.js?v=2.0.0" charset="utf-8"></script>

    <![endif]-->
    <style id="layuimini-bg-color">
    </style>
</head>
<body class="layui-layout-body layuimini-all">
<div class="layui-layout layui-layout-admin">

    <div class="layui-header header">
        <div class="layui-logo layuimini-logo"></div>

        <div class="layuimini-header-content">
            <a>
                <div class="layuimini-tool">
                    <i title="展开" class="fa fa-outdent" data-side-fold="1"></i>
                    <!--                    <span style="margin-left: 10px; font-size: 16px;color: #0C0C0C ">欢迎进入乐享物流管理系统</span>-->
                </div>
            </a>

            <!--            &lt;!&ndash;电脑端头部菜单&ndash;&gt;-->
            <!--            <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-menu-header-pc layuimini-pc-show">-->
            <!--            </ul>-->

            <!--            &lt;!&ndash;手机端头部菜单&ndash;&gt;-->
            <!--            <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-mobile-show">-->
            <!--                <li class="layui-nav-item">-->
            <!--                    <a href="javascript:;"><i class="fa fa-list-ul"></i> 选择模块</a>-->
            <!--                    <dl class="layui-nav-child layuimini-menu-header-mobile">-->
            <!--                    </dl>-->
            <!--                </li>-->
            <!--            </ul>-->

            <ul class="layui-nav layui-layout-right" style="margin-right: 20px;">
                <!-- 搜索图标 -->
                <li class="layui-nav-item" lay-unselect style="margin: 0 8px;">
                    <a href="javascript:;"><i class="fa fa-search"></i> 搜索</a>
                </li>

                <!-- 消息图标 -->
                <li class="layui-nav-item" lay-unselect style="margin: 0 8px;">
                    <a href="javascript:;"><i class="fa fa-bell"></i> 消息</a>
                </li>

                <!-- 用户信息 -->
                <li class="layui-nav-item" lay-unselect style="margin: 0 8px;">
                    <a href="javascript:;" id="userInfoLink">
                        <i class="fa fa-user"></i> <span id="userName">未登录</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" class="login-out">
                                <i class="fa fa-sign-out"></i> 退出登录
                            </a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!--无限极左侧菜单-->
    <div class="layui-side layui-bg-black layuimini-menu-left">
        <!-- 初始加载状态 -->
        <div class="layui-side-scroll">
            <div class="layui-nav layui-nav-tree" lay-filter="leftMenu">
                <div class="loading-menu" style="padding: 20px; text-align: center; color: #999;">
                    <i class="fa fa-spinner fa-spin"></i> 加载菜单中...
                </div>
            </div>
        </div>
    </div>

    <!--初始化加载层-->
    <div class="layuimini-loader">
        <div class="layuimini-loader-inner"></div>
    </div>

    <!--手机端遮罩层-->
    <div class="layuimini-make"></div>

    <!-- 移动导航 -->
    <div class="layuimini-site-mobile"><i class="layui-icon"></i></div>

    <div class="layui-body">

        <div class="layuimini-tab layui-tab-rollTool layui-tab" lay-filter="layuiminiTab" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" id="layuiminiHomeTabId" lay-id=""></li>
            </ul>
            <div class="layui-tab-control">
                <li class="layuimini-tab-roll-left layui-icon layui-icon-left"></li>
                <li class="layuimini-tab-roll-right layui-icon layui-icon-right"></li>
                <li class="layui-tab-tool layui-icon layui-icon-down">
                    <ul class="layui-nav close-box">
                        <li class="layui-nav-item">
                            <a href="javascript:;"><span class="layui-nav-more"></span></a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;" layuimini-tab-close="current">关 闭 当 前</a></dd>
                                <dd><a href="javascript:;" layuimini-tab-close="other">关 闭 其 他</a></dd>
                                <dd><a href="javascript:;" layuimini-tab-close="all">关 闭 全 部</a></dd>
                            </dl>
                        </li>
                    </ul>
                </li>
            </div>
            <div class="layui-tab-content">
                <div id="layuiminiHomeTabIframe" class="layui-tab-item layui-show"></div>
            </div>
        </div>

    </div>
</div>
<script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji', 'element'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniAdmin = layui.miniAdmin,
            miniTongji = layui.miniTongji,
            element = layui.element;

        // 检查用户是否登录
        var userInfo = JSON.parse(localStorage.getItem('user'));
        if (!userInfo || !userInfo.userId) {
            layer.msg('请先登录', function() {
                window.location.href = '../login.html';
            });
            return;
        }

        // 显示用户信息
        $('#userName').text(userInfo.userName || '未知用户');

        // 获取用户ID并请求菜单
        var userId = userInfo.userId;
        if (userId) {
            // 发送AJAX请求获取菜单列表
            // 开始请求时显示加载
            const loadingIndex = layer.load(2, { shade: [0.1, '#fff'] });

            $.ajax({
                url: '/menu/getMenuByUserId/' + userId,
                type: 'GET',
                success: function (res) {
                    layer.close(loadingIndex); // 关闭加载
                    if (res.code === 0 && res.data && res.data.length > 0) {
                        renderMenu(res.data);
                    } else {
                        $('.layuimini-menu-left').html('<div style="padding:20px;">暂无菜单数据</div>');
                    }
                },
                error: function (xhr, status, error) {
                    layer.close(loadingIndex); // 关闭加载
                    $('.layuimini-menu-left').html('<div style="padding:20px; color:red;">菜单加载失败</div>');
                    console.error(xhr.responseText);
                }
            });
            const options = {
                iniUrl: "api/init.json",    // 若有初始化接口
                urlHashLocation: true,     // 开启 hash 定位
                menuChildOpen: true,       // 默认展开菜单（可选）
                maxTabNum: 20,             // 最大 tab 数量
                homePage: "index.html",
            };
            miniAdmin.render(options);
        } else {
            layer.msg('用户ID不存在', function() {
                window.location.href = '../login.html';
            });
        }

        function renderMenu(menuList) {
            // 递归生成菜单 HTML（适配 layui-nav-tree）
            function generateMenuHtml(menus) {
                let html = '';
                menus.forEach(menu => {
                    html += `<li class="layui-nav-item">`;
                    // 有子菜单
                    if (menu.children && menu.children.length > 0) {
                        html += `<a href="${menu.href}" target="${menu.target}">
                    <i class="fa ${menu.icon}"></i>
                    <span>${menu.title}</span>
                </a>`;
                        html += `<dl class="layui-nav-child">`;
                        html += generateMenuHtml(menu.children);
                        html += `</dl>`;
                    } else {
                        // 无子菜单，直接跳转
                        html += `<a href="${menu.href}" target="${menu.target}">
                    <i class="fa ${menu.icon}"></i>
                    <span>${menu.title}</span>
                </a>`;
                    }
                    html += `</li>`;
                });
                return html;
            }

            // 生成完整菜单 HTML 并插入
            const menuHtml = `<ul class="layui-nav layui-nav-tree" lay-filter="sideMenu">${generateMenuHtml(menuList)}</ul>`;
            $('.layuimini-menu-left').html(menuHtml);

            // 关键：layui 组件需要重新渲染！
            layui.use('element', function(){
                const element = layui.element;
                element.render('nav', 'sideMenu');
            });
        }
        // 自定义 openTab 方法
        function openTab(href, title) {
            // 判断是否已存在该 tab
            var exists = false;
            $('.layui-tab-title li').each(function (index) {
                if ($(this).attr('lay-id') === href) {
                    exists = true;
                    element.tabChange('layuiminiTab', href); // 切换到已有 tab
                    return false; // break
                }
            });

            if (!exists) {
                // 添加新的 tab
                element.tabAdd('layuiminiTab', {
                    title: title,
                    content: '<iframe src="' + href + '" frameborder="0" style="width:100%;height:100%;"></iframe>',
                    id: href
                });
                element.tabChange('layuiminiTab', href); // 切换到新打开的 tab
            }
        }

        $(document).on('click', '.layuimini-menu-left .layui-nav a', function(e) {
            e.preventDefault(); // 阻止默认跳转

            var $this = $(this);
            var href = $this.attr('href'); // 获取菜单链接
            var title = $this.find('span').text(); // 获取菜单标题

            // if (!href || href === '#') return; // 如果是父级菜单则不执行

            // 使用自定义 openTab 方法加载页面
            openTab(href, title);
        });
        // 退出登录功能
        $('.login-out').on("click", function () {
            layer.confirm('确定要退出登录吗？', {icon: 3, title:'提示'}, function(index){
                // 清除本地存储
                localStorage.removeItem('user');
                localStorage.removeItem('userId');
                // 跳转到登录页
                window.location.href = '../login.html';
                layer.close(index);
            });
        });
    });
</script>
</body>
</html>